<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >查看报告</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="d-list">
      <div class="list-box">
        <div class="head">
          <van-image
            round
            width="0.7rem"
            height="0.7rem"
            :src="docotorData && docotorData.headImage"
          />
          <div class="right">
            <div class="up">
              <span>{{ docotorData && docotorData.realName }}</span>
              <span>{{ docotorData && docotorData.post }}</span>
              <span>{{ docotorData && docotorData.departmentName }}</span>
            </div>
            <div class="center">
              <el-rate
                :value="Number(docotorData && docotorData.score)"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
                >></el-rate
              >
            </div>
            <div class="down">
              <span>{{ docotorData && docotorData.hospitalName }}</span>
              <span>{{ docotorData && docotorData.hospitalLevel }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="talk">
        <div class="talk-box">
          <van-image
            round
            width="0.5rem"
            height="0.5rem"
            :src="docotorData && docotorData.headImage"
          />
          <div class="bubble">
            <div class="bubbleTail"></div>
            <div class="work">
              <p class="title">
                <span>推荐医院：</span>
                <van-button type="primary" plain size="mini" @click="hsDetail"
                  >详情</van-button
                >
              </p>
              <p class="content">
                {{ reportData && reportData.adviseHospital }}
                <!-- <van-button type="primary" plain size="mini">详情</van-button> -->
              </p>
              <p class="title">医生建议：</p>
              <p class="content">{{ reportData && reportData.adviseHelp }}</p>
            </div>
          </div>
          <div class="time">
            <p>{{ reportData && reportData.orderTime }}</p>
          </div>
        </div>
        <div v-for="(item, index) in quesData" :key="index">
          <div class="talk-box2">
            <div class="bubble2">
              <div class="bubbleTail2"></div>
              <div class="work">
                <p class="title">提出问题：</p>
                <p class="content">
                  {{ item && item.patientReason }}
                </p>
                <p
                  class="title"
                  v-if="item.patientImg != null && item.patientImg.length > 0"
                >
                  上传图片：
                </p>
                <p
                  class="content"
                  v-if="item.patientImg != null && item.patientImg.length > 0"
                >
                  <van-image
                    v-for="(items, index) in item.imgPatient"
                    :key="index"
                    width="0.7rem"
                    height="0.7rem"
                    @click="view(items)"
                    :src="items"
                  />
                </p>
              </div>
            </div>
            <van-image
              round
              width="0.5rem"
              height="0.5rem"
              :src="require('../../assets/images/mine1.png')"
            />
            <div class="time">
              <p>{{ item && item.creatTime }}</p>
            </div>
          </div>
          <div v-if="item.questionStatus == 2" class="talk-box">
            <van-image
              round
              width="0.5rem"
              height="0.5rem"
              :src="docotorData && docotorData.headImage"
            />
            <div class="bubble">
              <div class="bubbleTail"></div>
              <div class="work">
                <p class="title">
                  <span>医生回复：</span>
                </p>
                <p class="content">
                  {{ item && item.doctorReason }}
                  <!-- <van-button type="primary" plain size="mini">详情</van-button> -->
                </p>
                <p
                  class="title"
                  v-if="item.doctorImg != null && item.doctorImg.length > 0"
                >
                  上传图片：
                </p>
                <p
                  class="content"
                  v-if="item.doctorImg != null && item.doctorImg.length > 0"
                >
                  <van-image
                    v-for="(itemss, index) in item.imgDoctor"
                    :key="index"
                    width="0.7rem"
                    height="0.7rem"
                    @click="view2(itemss)"
                    :src="itemss"
                  />
                </p>
              </div>
            </div>
            <div class="time">
              <p>{{ reportData && reportData.orderTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fix-btn">
      <van-button
        v-if="reportData && reportData.orderQuestion > 0"
        @click="toAsk"
        type="primary"
        >继续询问医生({{
          reportData && reportData.orderQuestion
        }}/2次)</van-button
      >
      <van-button v-else type="warning">立刻支付9.9元获得一次询问</van-button>
    </div>
    <van-popup
      v-model="askShow"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="ask-box">
        <p>快速提问</p>
        <van-field
          v-model="askmessage"
          rows="2"
          autosize
          type="textarea"
          maxlength="500"
          placeholder="请用10-500字详细描述你需要提问的问题"
          show-word-limit
        />
        <div class="a-time">
          <van-field name="radio" label="医生回复时长">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="24">24小时</van-radio>
                <van-radio name="48">48小时</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
        <div class="upload">
          <van-uploader
            accept="image/*"
            v-model="fileList"
            :max-count="6"
            :after-read="afterRead"
            :before-delete="beforeDelete"
          />
        </div>
        <van-button @click="submitQs" type="info">提交</van-button>
      </div>
    </van-popup>
    <van-popup
      v-model="hospitalShow"
      closeable
      position="bottom"
      :style="{ height: '85%' }"
    >
      <div class="h-list">
        <div
          class="h-child"
          v-for="(item, index) in hospitalRecommend"
          :key="index"
        >
          <div class="center">
            <div class="one">
              <p>{{ item.hospital }}</p>
            </div>
            <div class="two">
              <p>{{ item.department }}{{ item.hospitalCategory }}</p>
              <p>{{ item.hospitalLevel }}</p>
            </div>
            <div class="three">
              <van-collapse v-model="activeNames" accordion>
                <van-collapse-item title="医院介绍" icon="shop-o" :name="index">
                  {{ item.hospitalIntroduct }}
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="four">
              <p>擅长疾病：{{ item.hospitalSkilled }}</p>
              <p>地址：{{ item.address }}</p>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast, Dialog, ImagePreview } from "vant";
import navbar from "@/components/navbar";
import {
  getPatientOrder,
  seetOrderQuestion,
  seetOrderQuestionImg,
  getOrderQuestion,
  setMesStatus,
} from "@/api/doctor";
export default {
  name: "doctorReport",
  data() {
    return {
      value: 0,
      orderId: "",
      reportData: null,
      docotorData: null,
      askShow: false,
      askmessage: "",
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
      radio: "",
      maxid: new Date().getTime(),
      resArr: [],
      hospitalShow: false,
      hospitalRecommend: [],
      activeNames: "0",
      quesData: [],
    };
  },

  components: { navbar },
  computed: {},

  created() {
    this.orderId = this.$route.params.orderId || null;
    window.scroll(0, 0);
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      overlay: true,
    });
    this.getList();
    this.setStatus();
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({
        name: "consultation",
      });
    },
    getList() {
      let data = {
        orderId: this.orderId,
      };
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });
      getPatientOrder(data).then((res) => {
        if (res.data.status == 200) {
          this.reportData = res.data.info;
          this.docotorData = res.data.docinfo;
          this.hospitalRecommend = res.data.info.hospitalRecommend;
          Toast.clear();
        } else {
          Toast.fail(res.data.msg);
        }
      });
      getOrderQuestion(data).then((res) => {
        if (res.data.status == 200) {
          this.quesData = res.data.info;
        } else {
          Toast.fail("系统出错");
        }
      });
    },
    // 继续询问
    toAsk() {
      if (this.reportData.orderQuestion == 0) {
        //
      } else if (
        this.quesData.length > 0 &&
        this.quesData[0].questionStatus == 1
      ) {
        Toast.fail("请等待医生回答完再询问");
      } else {
        this.askShow = true;
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    afterRead(file) {
      if (file.file) {
        var formData = new FormData();
        let { maxid, reportData } = this;
        formData.append("file", file.file);
        formData.append("maxid", maxid);
        formData.append("dsid", reportData.dsId);
        formData.append("name", "patient");
        seetOrderQuestionImg(formData).then((res) => {
          if (res.data.status == 200) {
            let str = res.data.path.match(/patient\/(\S*)/)[1];
            let data = {
              path: res.data.path,
              str: str,
            };
            this.resArr.push(data);
          }
        });
      }
    },
    beforeDelete(file) {
      for (let i = 0; i < this.resArr.length; i++) {
        if (this.resArr[i].str == file.file.name) {
          console.log(this.resArr[i].str);
          this.resArr.splice(i, 1);
          i--;
          return true;
        }
      }
    },
    //提交
    submitQs() {
      let {
        askmessage,
        radio,
        maxid,
        reportData,
        docotorData,
        resArr,
        fileList,
      } = this;
      let deal = [];
      fileList.forEach((item) => {
        resArr.forEach((items) => {
          if (items.str == item.file.name) {
            deal.push(items.path);
          }
        });
      });
      let str = deal.join("#");
      if (askmessage.length == 0) {
        Toast.fail("请输入您的提问");
      } else if (radio.length == 0) {
        Toast.fail("请选择时长");
      } else {
        let data = {
          orderId: reportData.orderId,
          dsid: reportData.dsId,
          doctorId: docotorData.id,
          patientReason: askmessage,
          questionTime: radio,
          questionId: maxid,
          patientImg: str,
          questionStatus: 1,
        };
        seetOrderQuestion(data).then((res) => {
          if (res.data.status == 200) {
            Toast.success("提交成功");
            this.askShow = false;
            this.askmessage = "";
            this.radio = "";
            this.fileList = [];
            this.resArr = [];
            this.getList();
          } else {
            Toast.fail("系统错误，重新提交");
          }
        });
      }
    },
    // 医院详情
    hsDetail() {
      this.hospitalShow = true;
    },
    // 预览
    view(items) {
      ImagePreview([items]);
    },
    // 预览
    view2(itemss) {
      ImagePreview([itemss]);
    },
    //
    setStatus() {
      let data = {
        orderId: this.orderId,
        messageStatus: 0,
      };
      setMesStatus(data).then((res) => {});
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .d-list {
    width: 95%;
    height: 100%;
    margin: auto;
    padding-bottom: 0.1rem;
    & .list-box {
      border-radius: 0.1rem;
      background: #fff;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      box-shadow: 1px 1px 8px #cccccc;
      & .head {
        display: flex;
        justify-content: space-around;
        padding-top: 0.2rem;
        padding-bottom: 0.1rem;
        & .right {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          & .center {
            text-align: left;
            margin: 0.05rem 0;
          }
          & .up {
            display: flex;
            justify-content: space-between;
            vertical-align: auto;
            & span:nth-of-type(1) {
              font-size: 0.2rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(3) {
              font-size: 0.14rem;
            }
          }
          & .down {
            display: flex;
            justify-content: space-between;
            & span:nth-of-type(1) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
              color: red;
            }
          }
        }
      }
    }
  }
  & .talk {
    margin-top: 0.1rem;
    background: #fff;
    border-radius: 0.1rem;
    margin-bottom: 0.6rem;
    // box-shadow: 4px 4px 10px #cccccc;
    & .talk-box {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      padding: 0.1rem;
      box-sizing: border-box;
      padding-top: 0.25rem;
      & .time {
        position: absolute;
        color: #999999;
        top: 0.1rem;
        left: 0.85rem;
        // width: 1rem;
        // height: 1rem;
        & p {
          font-size: 0.12rem;
          color: #999;
        }
      }
    }
    & .talk-box2 {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      padding: 0.1rem;
      box-sizing: border-box;
      padding-top: 0.25rem;
      & .time {
        position: absolute;
        color: #999999;
        top: 0.1rem;
        right: 0.85rem;
        // width: 1rem;
        // height: 1rem;
        & p {
          font-size: 0.12rem;
          color: #999;
        }
      }
    }
  }
}
.pj-box {
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  padding: 0.1rem 0;
  & .title {
    margin-top: 0.1rem;
    text-align: left;
    text-indent: 0.1rem;
  }
  & .star {
    margin: 0.15rem;
  }
  & .van-button {
    width: 95%;
    margin: auto;
  }
}
.bubble {
  position: relative;
  margin-left: 0.2rem;
  width: 2.5rem;
  // height: 100px;
  border-radius: 5px;
  background-color: currentColor;
  color: #ddd;
  & .bubbleTail {
    position: absolute;
    left: -0.15rem;
    top: 0px;
    width: 0.16rem;
    height: 0.3rem;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom-width: 10px;
    border-bottom-color: currentColor;
    border-radius: 0 0 0 42px;
    color: #dddddd;
  }
  & .work {
    text-align: left;
    font-size: 0.14rem;
    padding: 0.08rem;
    & .title {
      margin: 0.05rem 0;
      font-size: 0.14rem;
      color: #565656;
      & span {
        vertical-align: middle;
      }
      & .van-button {
        vertical-align: middle;
      }
    }
    & .content {
      // text-indent: 0.1rem;
      line-height: 0.22rem;
      font-size: 0.14rem;
      color: black;
      & .van-image {
        margin-right: 0.05rem;
      }
      & span {
        display: block;
      }
      & .van-button {
        // margin-left: 0.1rem;
        margin-bottom: 0.05rem;
      }
    }
    & .star {
      margin: 0 0 0.2rem 0;
    }
  }
}
.bubble2 {
  position: relative;
  // top: 60px;
  // right: 100px;
  margin-right: 0.2rem;
  width: 2.5rem;
  // height: 100px;
  border-radius: 5px;
  background-color: currentColor;
  color: #ddd;
  & .bubbleTail {
    position: absolute;
    left: -0.15rem;
    top: 0px;
    width: 0.16rem;
    height: 0.3rem;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom-width: 10px;
    border-bottom-color: currentColor;
    border-radius: 0 0 0 42px;
    color: #dddddd;
  }
  & .bubbleTail2 {
    position: absolute;
    left: 100%;
    top: 0px;
    width: 0.16rem;
    height: 0.21rem;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom-width: 10px;
    border-bottom-color: currentColor;
    border-radius: 0 0 42px 0;
    color: #dddddd;
  }
  & .work {
    text-align: left;
    font-size: 0.14rem;
    padding: 0.08rem;
    & .title {
      margin: 0.05rem 0;
      font-size: 0.14rem;
      color: #565656;
    }
    & .content {
      // text-indent: 0.1rem;
      line-height: 0.28rem;
      font-size: 0.14rem;
      color: black;
      & .van-image {
        margin-right: 0.05rem;
      }
      & span {
        display: block;
      }
    }
    & .star {
      margin: 0 0 0.2rem 0;
    }
  }
}
.fix-btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  & .van-button {
    width: 100%;
  }
}
.ask-box {
  width: 100%;
  margin: 0 auto;
  margin-top: 0.4rem;
  padding-bottom: 0.5rem;
  & .van-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  & .upload {
    text-align: left;
    margin-left: 0.1rem;
    margin-top: 0.1rem;
  }
}
.h-list {
  width: 95%;
  margin: auto;
  margin-top: 0.5rem;
  & .h-child {
    background: #fff;
    margin-bottom: 0.15rem;
    border-radius: 0.1rem;
    box-shadow: 0px 0px 5px #cccccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.05rem;
    & .center {
      width: 85%;
      & .one {
        display: flex;
        justify-content: space-between;
        & p:nth-of-type(1) {
          font-size: 0.16rem;
          width: 100%;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0.1rem 0;
        }
      }
      & .two {
        display: flex;
        justify-content: space-between;
        & p {
          margin: 0.1rem 0;
          font-size: 0.14rem;
        }
        & p:nth-of-type(1) {
          color: #999999;
        }
        & p:nth-of-type(2) {
          color: red;
        }
      }
      & .three {
        // margin-bottom: 0.1rem;
        font-size: 0.16rem;
        text-align: left;
        color: black;
        line-height: 0.18rem;
        & /deep/ .van-cell {
          padding: 0.1rem 0 !important;
        }
      }
      & .four {
        margin-bottom: 0.1rem;
        margin-top: 0.1rem;
        font-size: 0.14rem;
        text-align: left;
        color: #999999;
        line-height: 0.18rem;
      }
    }
  }
}
</style>